import useGlobalAPI from '@/hooks/useGlobalAPI'
import { defineComponent } from 'vue'
import {CnMediumSpan} from '../text'

export const PageNav = defineComponent({
  props: {
    title: String,
  },
  setup(props, {slots}) {
    const {router} = useGlobalAPI()
    return () => (
      <div class='absolute top-0 left-0 w-full h-60 shadow-pageHeader bg-white z-10'>
        <div class='h-full flex justify-between items-center pl-20'>
          <div
            class='h-full flex items-center'
            onClick={() => {
              router.back()
            }}
          >
            <i class='inline-block w-32 h-32 leading-32 text-center rounded-full border-1 border-infoHalf iconfont icon-zuojiantou1 text-20 text-info mr-12 hover:text-primaryHalf hover:border-primaryHalf cursor-pointer'></i>
            <CnMediumSpan class='text-16'>
              {props.title || ''}
            </CnMediumSpan>
          </div>
          <div class='h-full flex-1'>
            {slots.default?.()}
          </div>
          <div class='h-full'>
            {slots.navRight?.()}
          </div>
        </div>
      </div>
    )
  },
})
